<script>
export default {
  name: "td-test",
  data() {
    return {
      //取消支付原因列表
      infoList: [
        {
          id: 1,
          title: '计划有变没时间消费'
        },
        {
          id: 2,
          title: '买多了/买错了'
        },
        {
          id: 3,
          title: '后悔了，不想要'
        },
        {
          id: 4,
          title: '不会/不想写探店笔记'
        },
        {
          id: 5,
          title: '其他平台/店里活动更优惠'
        },
        {
          id: 6,
          title: '没看清使用规则，要用时发现限制很多'
        },
        {
          id: 7,
          title: '误以为是外卖'
        },
        {
          id: 8,
          title: '预约不上/排队太久'
        },
        {
          id: 9,
          title: '朋友/网上评价不好'
        },
        {
          id: 10,
          title: '商家停业/装修/转让'
        }
      ],
    };
  },
  methods: {
    scrollToTop() {
      console.log('滚动到顶部==', this.$refs.myScrollView)
      this.$refs.myScrollView.scrollIntoView({
        top: 0, // 滚动到顶部
        behavior: 'smooth' // 平滑滚动
      });
    }
  }
}
</script>

<template>
  <view class="shop-list">
    <scroll-view ref="myScrollView" scroll-y="true" style="height: 300px;padding: 20rpx 0;">
      <!-- 你的内容 -->
      <view v-for="item in infoList" :key="item.id">
        <view style="line-height: 60rpx;display: flex;justify-content: left;"><text>{{item.id}}</text><text>-{{item.title}}</text></view>
      </view>
    </scroll-view>
    <button @click="scrollToTop">滚动到顶部</button>

  </view>
</template>

<style scoped lang="scss">
.shop-list {
  background-color: #ffffff;
  border-radius: 30rpx;
  padding: 0 30rpx 30rpx 30rpx;
  margin-bottom: 30rpx;
}
</style>